<template>
	<view style="width: 100vw;height: 100vh;background-color: #F7F7F7;display: flex;flex-direction: column;">
		<view class="year" @click="yearHandle">2024年</view>
		<view style="flex-grow: 1;">
			
		</view>
		<u-popup :show="show" @close="close" @open="open" :round="10">
			<view style="height: 300px;">
				<u-row justify="space-between">
					<u-col span="3" style="margin-top: 10px;">
						<view style="display: flex;align-items: center;justify-content: center;height: 40px;background-color: red">2024</view>
					</u-col>
					<u-col span="3">
						<view style="display: flex;align-items: center;justify-content: center;height: 40px;background-color: red">2024</view>
					</u-col>
					<u-col span="3">
						<view style="display: flex;align-items: center;justify-content: center;height: 40px;background-color: red">2024</view>
					</u-col>
					<u-col span="3">
						<view style="display: flex;align-items: center;justify-content: center;height: 40px;background-color: red">2024</view>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				show: false
			}
		},
		methods:{
			yearHandle(){
				this.show = true;
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.year{
		width: 100vw;
		height: 54px;
		background-color: white;
		display: flex;
		align-items: center;
		padding-left: 16px;
	}
</style>